<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
	<meta charset="utf-8">
	<title>layui</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" th:href="@{/js/layui-v2.4.5/layui/css/layui.css}" media="all" />
	<link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
</head>
<body  style="-webkit-backface-visibility: hidden;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	<legend>添加菜单</legend>
</fieldset>
<form class="layui-form"  lay-filter="example">
	<div class="layui-form-item">
		<label class="layui-form-label">上级菜单</label>
		<div class="layui-input-inline">
			<select name="parentId" id ="parentId" lay-filter="parentSelect" >
				<!--<option value="1" >男</option>-->
				<!--<option value="0">女</option>-->
			</select>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">名称</label>
		<div class="layui-input-block">
			<input type="text" name="label" lay-verify="required" autocomplete="off" placeholder=""  class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">样式</label>
		<div class="layui-input-block">
			<input type="text"   name="css" id="css" value="layui-icon-face-smile-fine" lay-filter="css" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">链接</label>
		<div class="layui-input-block">
			<input type="text" name="uri"  autocomplete="off"  placeholder=""  class="layui-input" value="">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">菜单类型</label>
		<div class="layui-input-inline">
			<select name="type" lay-filter="btnType">
				<option value="1" >菜单</option>
				<option value="2">按钮</option>
			</select>
		</div>
	</div>

	<div class="layui-form-item" style="display: none" id="btnPermissionDiv">
		<label class="layui-form-label">按钮权限</label>
		<div class="layui-input-block">
			<input type="text" name="btnPermission" id="btnPermission" autocomplete="off" placeholder=""  class="layui-input" >
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">排序</label>
		<div class="layui-input-block">
			<input type="text" name="priority" lay-verify="required" autocomplete="off" placeholder=""  class="layui-input" oninput="value=value.replace(/[^\d]/g,'')" >
		</div>
	</div>



	<div class="layui-form-item">
		<div class="layui-input-block" style="text-align: center">
			<button type="button" class="layui-btn layui-btn-normal" id ="back">返回</button>
			<button   class="layui-btn" lay-submit lay-filter="save">保存</button>
		</div>
	</div>
</form>
<script th:src="@{/js/jquery-1.7.2.min.js}"></script>
<script th:src="@{/js/layui-v2.4.5/layui/layui.js}"></script>
<script th:src="@{/js/utils.js}"></script>
	<script th:inline="javascript">
		var parentId=[[${parentId}]];
        var parentName=[[${parentName}]];
        var layer;
        layui.config({
            base: path+'/js/public/iconPicker/'
        }).extend({
            iconPicker: 'iconPicker'
        });
		layui.use(['layer','form','iconPicker'], function(){
		     layer = parent.layer === undefined ? layui.layer : parent.layer;
            var form = layui.form;
            var iconPicker = layui.iconPicker;

            var initParentMenuSelect = function(){
                $.ajax({
                    type : 'get',
                    url : path+'/resource/parents',
                    async : false,
                    success : function(data) {
                        var select = $("#parentId");
                        select.append("<option value='0'>root</option>");
                        for(var i=0; i<data.length; i++){
                            var d = data[i];
                            var id = d['id'];
                            var name = d['label'];
                            select.append("<option value='"+ id +"'>" +name+"</option>");
                        }
                        console.log(select.html());
                        form.render('select');
                    }
                });
            };
            if(parentId!=null&&parentId!=""){
                var select = $("#parentId");
                select.append("<option value='"+ parentId +"'>" +parentName+"</option>");
                form.render('select');
			}else{
                initParentMenuSelect();
			}




            iconPicker.render({
                // 选择器，推荐使用input
                elem: '#css',
                // 数据类型：fontClass/unicode，推荐使用fontClass
                type: 'fontClass',
                // 是否开启搜索：true/false
                search: true,
                // 是否开启分页
                page: true,
                // 每页显示数量，默认12
                limit: 24,
                // 点击回调
                click: function (data) {
                    console.log(data);
                },
                // 渲染成功后的回调
                success: function(d) {
                    console.log(d);
                   // $('#css').val('iconpicker');
                }
            });


            /**
             *
             *监听提交
             * */
            form.on('submit(save)', function(data){

                console.log(data.field)
                var mydata = data.field;
                if(mydata.type==2&&mydata.btnPermission==""){
                    layer.msg("请填写按钮权限",{icon: 5})
                    return false;
				}
                var load = layer.load();
                $.ajax({
                    type: "POST",
                    url:  path+'/resource/save',
                    dataType:"json",
                    data:data.field,
                    success : function(data) {
                        layer.close(load);
                        if(data.code=="1"){
                            console.log(window.parent.hasSave);
                            layer.msg(data.msg,{icon: 6})
                            window.parent.hasSave=true;
                            console.log(window.parent.hasSave);
                            var index=layer.getFrameIndex(window.name); //获取当前窗口的name
                            layer.close(index);
                        }else{
                            layer.msg(data.msg,{icon: 5})
                        }
                    }
                });
                return false;
            });

            form.on('select(btnType)', function(data){
                var value = data.value;
                if(value==2){//显示菜单权限，
					$("#btnPermissionDiv").show();

				}else{//否则隐藏
                    $("#btnPermission").val("");
                    $("#btnPermissionDiv").hide();
				}
            });

        });


		$("#back").click(function () {
            var index=layer.getFrameIndex(window.name); //获取当前窗口的name
            console.log(index)
            layer.close(index);
        })



	</script>
</body>
</html>